<template>
	<div class="commentBox">
		<div class="toptilte">
			精彩评论
		</div>
		<div class="xian"></div>
		<div v-for="(every,index) in info[index].brilliant" v-if="every.isGood">
			<div class="main">
				<div class="leftimg">
					<img class="headimg" :src="every.headimg" />
				</div>
				<div class="rightpart">
					<div>
						<div class="username">{{every.username}}</div>
						<span class="louhao">{{index+1}}楼</span>
						<span class="time">{{every.time}}</span>
						<div class="likes" @click="likeEvent(index)">
							<img src="../../../assets/images/circle/23/zan_btn_normal.png" alt="" />
							<span class="likescount">{{every.likescount}}</span>
						</div>
					</div>
					<div class="commenttext">{{every.commenttext}}</div>
					<div class="address">{{every.address}}</div>
					<div class="delBtn" @click="del">删除此文</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				flag: false,
				dialogVisible: false,
				input: ''
			}
		},
		methods: {
			likeEvent(index) {
				this.info[this.index].brilliant[index].likescount++;
			},
			del() {
				{
					this.$confirm('确认要删除此文?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});
					});
				}
			}
		},
		//接收父组件传递过来的数据
		props: {
			'info': Array,
			'index': Number,
			'routeName': String
		}
	}
</script>

<style scoped lang="less">
	@current: 100rem;	
	.commentBox {
		padding: 20/@current 40/@current 20/@current 40/@current;
		position: relative;
		height: 940/@current;
		.toptilte {
			border-left: 5/@current solid #b676eb;
			padding-left: 10/@current;
			font-size: 30/@current;
			color: #141314;
			font-weight: 600;
		}
		.xian {
			position: absolute;
			width: 70%;
			height: 1/@current;
			background-color: #D7D2E0;
			right: 0;
			top: 40/@current;
		}
		.main {
			height: 320/@current;
			border-bottom: 1/@current solid #DED9E6;
			.leftimg {
				width: 60/@current;
				height: 60/@current;
				position: absolute;
				margin-right: 20/@current;
				margin-top: -10/@current;
				.headimg {
					width: 100%;
					border-radius: 50%;
					height: 100%;
				}
			}
			.rightpart {
				margin-top: 20/@current;
				position: absolute;
				right: 40/@current;
				width: 75%;
				/*width: 510/@current;*/
				height: 50/@current;
				font-size: 24/@current;
				.username {
					color: #b676eb;
					font-size: 28/@current;
					margin-bottom: 8/@current;
				}
				.time {
					color: #959595;	
				}
				.louhao {
					color: #959595;
					margin-right: 20/@current ;
				}
				.likes {
					position: absolute;
					right: 0/@current;
					top: 15/@current;
					width: 95/@current;
					img {
						width: 35/@current;
						margin-right: 8/@current;
					}
					.likescount {
						width: 50/@current ;
						color: #959595;
						position: absolute;
						top: 0/@current;
						font-size: 24/@current;
					}
				}
				.commenttext {
					margin-top: 28/@current;
					font-size: 30/@current;
					color: #313131;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}
				.commentimg {
					span {
						width: 143/@current;
						height: 143/@current;
						margin-right: 18/@current;
						img {
							width: 143/@current;
							height: 143/@current;
						}
					}
					span:last-child {
						margin-right: 0;
					}
				}
				.delBtn {
					float: right;
					color: #B676EB;
					font-size: 24/@current;
					width: 110/@current;
					height: 35/@current;
					margin: 20/@current 0;
					display: inline-block;
				}
				.address {
					font-size: 28/@current;
					color: #959595;
					display: inline-block;
					width: 200/@current;
					float: left;
					margin: 20/@current 0;
				}
			}
		}
	}
</style>
<style>
	.el-message-box__wrapper {
		width: 200px;
		margin: 0 auto;
	}
	
	.el-message-box__wrapper .el-message-box {
		width: 200px;
	}
</style>